<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 400px;
				height: 400px;
				margin: auto;
				background-color: aquamarine;
			}
			#div2{
				width: 300px;
				height: 300px;
				margin: auto;
				background-color: greenyellow;
			}
			#div3{
				width:200px;
				height: 200px;
				margin: auto;
				background-color: blueviolet;
			}
			#div4{
				width:100px;
				height: 100px;
				margin: auto;
				background-color: lime;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<h2>第一个div</h2>
			<div id="div2">
				<p>第二个div</p>
				<div id="div3">
					<a href="">第三个div</a>
					<div id="div4">
						<img id='img_1' src="" >div4
					</div>
				</div>
			</div>
		</div>
	</body>
	<!-- 4.制作4个嵌套DIV ，要求：
	      1.每个父DIV尺寸必须大于子DIV
	      2.实现每个DIV在父DIV正中间
	      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
	      
		  4.通过最底层DIV，打印每层父DIV，如：
		1级父元素为（），1级父节点为（）
		2级父元素为（），2级父节点为（）
		....
	      -->
		  <script type="text/javascript">
		  var aa=document.getElementById('img_1')
		  	//1级父元素为（）
			console.log(aa.parentNode);
			//1级父节点为（）
			console.log(aa.parentElement);
		  	//2级父元素为（）
			console.log(aa.parentNode.parentNode);
			//2级父节点为（）
			console.log(aa.parentElement.parentElement);
			console.log('----------------------------------------------------------')
			// 5.查找每个DIV的子元素和子节点 
			var bb=document.getElementById('div1')
			console.log(bb.childNodes);
			console.log(bb.children);
			var bb1=document.getElementById('div2')
			console.log(bb1.childNodes);
			console.log(bb1.children);
			var bb2=document.getElementById('div3')
			console.log(bb2.childNodes);
			console.log(bb2.children);
			var bb3=document.getElementById('div4')
			console.log(bb3.childNodes);
			console.log(bb3.children);
		  </script>
</html>
